<template>
  <div class="app-container">
    <!-- el-form和form一样，最外层有一个包裹的根tag   !!! ref是整个form的引用-->
    <el-form ref="form" :model="form" label-width="120px">

      <el-form-item label="上链唯一uuid">
        <el-input v-model="form.id" readonly />
      </el-form-item>
            <!-- prop 属性是校验必须的，必须和v-model绑定的值一样 -->
      <el-form-item label="上链数据类型" prop="datatype" verify >
        <el-input v-model="form.datatype" />
      </el-form-item>
      <el-form-item label="数据hash值" prop="hashinfo" verify >
        <el-input v-model="form.hashinfo" />
      </el-form-item>

      <!-- 按钮，绑定提交事件中实现请求逻辑 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button @click="onCancel">Cancel</el-button>
      </el-form-item>
    </el-form>
    <!-- <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" lable="日期" width="180">
       </el-table-column>
      <el-table-column prop="name" name="姓名" width="180">
       </el-table-column>
      <el-table-column prop="address" address="地址" width="180">
      </el-table-column>
    </el-table>
    </div> -->
    <div id="channelblockinfo">当前通道(链)区块hash信息:{{ channelblockinfo }}</div>
    <div id="previousblockinfo">前区块hash:{{ previousblockinfo }}</div>
    <div id="channelblockheight">当前通道区块高度:{{ channelblockheight }}</div>
  </div>
</template>

<script>
import { submitHashForm,getChannelBlockInfoByTXID } from "@/api/block";
import { PreformatFormData } from "@/utils/util";
import { v4 as uuidv4 } from 'uuid';
export default {
  data() {
    return {
      //和el-form 的 ref 要一样
      form: {
        id: "",
        hashinfo: "",
        datatype: "",
      },
 
      channelblockinfo: "",
      previousblockinfo: "",
      channelblockheight: "",
      readonly: true,
      //, tableData: [
      //   {
      //     date: "2016-05-06",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //   },
      //   {
      //     date: "2016-05-06",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //   },
      //   {
      //     date: "2016-05-06",
      //     name: "王小虎",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //   },
      // ],
    };
  },  created() {
    // 组件初始化时就直接调用
     this.generateUUID();
  },
  methods: {
    onSubmit() {
    let tableName='pigeon'
      // 不太知道原因，但是一定是要回调方法这里,应该是el的框架机制（callback可以家你是单理解成将函数看成参数）
      // 获取区块信息的txid的get参数
      let txid =''
       this.$refs.form.validate((valid) => {
          if (valid) {
            let newform = PreformatFormData(this.form,tableName)
            console.log(newform)
        submitHashForm(newform).then((response) => {
          // console.log("txid before")
          txid = response.data.TransactionID
          getChannelBlockInfoByTXID(txid).then((response) =>{
        this.channelblockinfo = response.data.currentblockinfo;
        this.previousblockinfo = response.data.previousblockinfo;
        this.channelblockheight = response.data.blockheight;
        });

      });
        this.generateUUID();
        // console.log("txid after")
        // getChannelBlockInfoByTXID(txid).then((response) =>{
        // this.channelblockinfo = response.data.currentblockinfo;
        // this.previousblockinfo = response.data.previousblockinfo;
        // this.channelblockheight = response.data.blockheight;
        // });
        this.$message("上链成功!");
          } else {
          this.$message({
        message: "请满足表单条件",
        type: "error",
        });
            return false;
          }
        });
    },
    onCancel() {
      this.$refs.form.resetFields();
      this.$message({
        message: "重置表单!",
        type: "warning",
      });
    },
    generateUUID(){
      this.form.id=uuidv4();
    }
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

